<template>
  <div class="remarkPage">
    <div class="remarkTop">
      <div class="remarkImg">
        <img
          :src="baseUrl+userInfo.userImg"
          alt=""
          width="100%"
          height="100%"
        >
      </div>
      <span>{{ userInfo.userName }}</span>
      <p>{{ question.qtitle }}</p>
    </div>
    <div class="remarkOptions">
      <button ref="blueBtn" :class="blueBtn" :disabled="disFlag"
              @click="clickOption('blue')"
      >
        {{ question.optionOne }}
      </button>
      <button ref="redBtn" :class="redBtn" :disabled="disFlag"
              @click="clickOption('red')"
      >
        {{ question.optionTwo }}
      </button>
    </div>
    <div class="remarkText">
      我觉得：
      <el-input
        v-model="textarea"
        type="textarea"
        placeholder="请自由发挥，理性评论，200字内。可多次提交评论，但选项不可更改。大家都是成年人了，谨言慎行。"
        maxlength="200"
        show-word-limit
        resize="none"
      />
    </div>
    <div class="subMit">
      <el-button type="primary" round @click="sendRemark">
        提交
      </el-button>
    </div>
  </div>
</template>
<script>
import eventBus from '@/api/eventBus';
import { transformTimestamp } from '../../utils/validate';
import { sendComment, chooseOption } from '../../api/subject';
export default {
  data() {
    return {
      blueBtn: 'blueBtn',
      redBtn: 'redBtn',
      textarea: '',
      question: {},
      optionVal: '',
      userInfo: '',
      baseUrl: '',
      optionFlag: '',
      disFlag: false,
      pageFlag: 0
    };
  },
  watch: {
    optionFlag() {
      if (this.optionFlag === 1) {
        this.disFlag = true;
        this.blueBtn = 'blueBtn blueActive';
        this.redBtn = '';
        this.optionVal = 1;
      } else if (this.optionFlag === 2) {
        this.disFlag = true;
        this.blueBtn = '';
        this.redBtn = 'redBtn redActive';
        this.optionVal = 2;
      }
    }
  },
  mounted() {
    eventBus.$emit('changeTitle', '杠一杠 身体棒');
    this.question = this.$route.params.questions;
    this.userInfo = this.$store.getters.userInfo;
    this.optionFlag = this.$route.params.optionFlag;
    this.pageFlag = this.$route.params.flag ? 1 : 0;
    this.baseUrl = process.env.VUE_APP_DEV_TARGET;
  },
  beforeDestroy() {
    if (this.pageFlag === 1) {
      eventBus.$emit('changeTitle', '题目详情');
    } else {
      eventBus.$emit('changeTitle', '官方');
    }
  },
  methods: {
    clickOption(item) {
      if (item === 'blue') {
        this.blueBtn = 'blueBtn blueActive';
        this.redBtn = 'redBtn';
        this.optionVal = 1;
      } else {
        this.blueBtn = 'blueBtn';
        this.redBtn = 'redBtn redActive';
        this.optionVal = 2;
      }
    },
    // 发表评论
    sendRemark() {
      const params = {
        qid: this.question.qid,
        uid: this.userInfo.uid,
        rcontent: this.textarea,
        rDate: transformTimestamp(new Date()),
        option: this.optionVal
      };
      const paramsOptions = {
        qid: this.question.qid,
        uid: this.userInfo.uid,
        useroption: this.optionVal,
        optionDate: transformTimestamp(new Date())
      };
      if (this.optionVal === '') {
        this.$message({
          showClose: true,
          message: '请先选择选项',
          type: 'error'
        });
      } else if (this.textarea === '') {
        this.$message({
          showClose: true,
          message: '请输入评论内容',
          type: 'error'
        });
      } else {
        chooseOption(paramsOptions).then((res) => {
          if (res.data.code === 200) {
            sendComment(params).then((res) => {
              if (res.data.code === 200) {
                this.$message({
                  showClose: true,
                  message: '发表成功',
                  type: 'success'
                });
                this.$router.goBack();
              } else {
                this.$message({
                  showClose: true,
                  message: '发表失败',
                  type: 'error'
                });
              }
            });
          }
        });
      }
    }
  }
};
</script>
<style lang="scss">
.el-textarea{
  margin-top: 10px;
  height: 150px;
  textarea{
    background: #F2F6FC;
    height: 150px;
  }
}
</style>
<style lang="scss" scoped>
.remarkPage{
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: hidden;
  .remarkTop{
    width: 100%;
    height: 30%;
    margin-top: 20px;
    text-align: center;
    .remarkImg{
      margin: 0 auto;
      width: 48px;
      height: 48px;
      border-radius: 100%;
      overflow: hidden;
      margin-bottom: 10px;
    }
    span{
      font-size: 12px;
      color: #5e5e5e;
      font-weight: bold;
    }
    p{
      padding-top: 20px;
      font-size: 16px;
      line-height: 72px;
      font-weight: bold;
    }
  }
  .remarkOptions{
    margin: 20px auto;
    width: 85%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    button{
      width: 40%;
      border-radius: 20px;
      border: none;
      color: #fff;
      display: flex;
      font-size: 14px;
      font-weight: bold;
      line-height: 36px;
      align-items: center;
      justify-content: center;
    }
    .blueBtn{
      color: #409EFF;
      border: 1px solid #409EFF;
      background: #d5e8fd;
    }
    .blueActive{
      border:none;
      color: #fff;
      background: #409EFF;
    }
    .redBtn{
      color: #F56C6C;
      border: 1px solid #F56C6C;
      background: #fcd6d6;
    }
    .redActive{
      border:none;
      color: #fff;
      background: #F56C6C;
    }
  }
  .remarkText{
    width: 85%;
    margin: 0 auto;
    font-size: 14px;
    color: #5e5e5e;
  }
  .subMit{
    width: 85%;
    margin:  20px auto;
    .el-button{
      width: 100%;
    }
  }
}
</style>
